<template>
  <a-layout>
    <a-layout-content
      :style="{
        background: '#fff',
        padding: '24px',
        margin: 0,
        minHeight: '280px',
      }"
    >
      <p>
        <a-form layout="inline" :model="param">
          <a-form-item>
            <a-input v-model:value="param.loginName" placeholder="登陆名">
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-button
              type="primary"
              @click="
                handleQuery({
                  current: 1,
                  pageSize: pagination.pageSize,
                  total: 10,
                })
              "
            >
              查询
            </a-button>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="add()"> 新增 </a-button>
          </a-form-item>
        </a-form>
      </p>
      <a-table
        :columns="columns"
        :data-source="users"
        :pagination="pagination"
        :loading="loading"

      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-space size="small">
              <a-button type="primary" @click="resetPassword(record)">
                重置密码
              </a-button>
              <a-button type="primary" @click="edit(record)"> 编辑 </a-button>
              <a-popconfirm
                title="删除后不可恢复，确认删除?"
                ok-text="是"
                cancel-text="否"
                @confirm="handleDelete(record.id)"
              >
                <a-button danger> 删除 </a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-layout-content>
  </a-layout>

  <a-modal
    title="用户表单"
    v-model:open="modalVisible"
    :confirm-loading="modalLoading"
    @ok="handleModalOk"
  >
    <a-form :model="user" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
      <a-form-item label="登陆名">
        <a-input v-model:value="user.loginName" :disabled="!!user.id" />
      </a-form-item>
      <a-form-item label="昵称">
        <a-input v-model:value="user.name" />
      </a-form-item>
      <a-form-item label="密码" v-show="!user.id">
        <a-input v-model:value="user.password" />
      </a-form-item>
    </a-form>
  </a-modal>

  <a-modal
    title="重置密码"
    v-model:open="resetModalVisible"
    :confirm-loading="resetModalLoading"
    @ok="handleResetModalOk"
  >
    <a-form :model="user" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
      <a-form-item label="新密码">
        <a-input v-model:value="user.password" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
const columns = [
  {
    title: "登陆名",
    dataIndex: "loginName",
  },
  {
    title: "名称",
    dataIndex: "name",
  },
  {
    title: "密码",
    dataIndex: "password",
  },
  {
    title: "Action",
    key: "action",
  },
];
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
});
const users = ref<User[]>([
  {
    id: 1,
    loginName: "test",
    name: "测试",
    password: "e70e2222a9d67c4f2eae107533359aa4",
  },
]);
const loading = ref(false);
/**
 * 数据查询
 **/

import { useApi } from "@/api";
import { Tool } from "@/utils/tool";
import { ref } from "vue";
import { Content, Pagination, User } from "../type";

const api = useApi();

const handleQuery = async (params: Pagination) => {
  loading.value = true;

  const data = await api.getUserList<Content<User>>(params);
    
      users.value = data.list !;
 
  
  loading.value = false;
  // 重置分页按钮
  pagination.value.current = params.current;
  pagination.value.total = data.total !;
};
const param = ref({ loginName: " " });
/**
 * 新增
 */
const add = () => {
  modalVisible.value = true;
  user.value = {
    id: 0,
    loginName: "",
    name: "",
    password: "",
  };
};

const handleModalOk = () => {
  modalLoading.value = true;
  modalLoading.value = false;
  // user.value.password = hexMd5(user.value.password + KEY);
  api.SaveUser(user.value);
  modalVisible.value = false;

  handleQuery({
    current: pagination.value.current,
    pageSize: pagination.value.pageSize,
    total: pagination.value.total,
  });
};

const resetModalVisible = ref(false);
const resetModalLoading = ref(false);
const user = ref<User>({
  id: 1,
  loginName: "test",
  name: "测试",
  password: "e70e2222a9d67c4f2eae107533359aa4",
});
/**
 * 重置密码
 */
const resetPassword = (record: any) => {
  resetModalVisible.value = true;
  user.value = Tool.copy(record);
  user.value.password = " ";
};

const modalVisible = ref(false);
const modalLoading = ref(false);

/**
 * 编辑
 */
const edit = (record: any) => {
  modalVisible.value = true;
  user.value = Tool.copy(record);
};

//删除
const handleDelete = async (id: number) => {
   await api.deleteUser(id);

  handleQuery({
    current: pagination.value.current,
    pageSize: pagination.value.pageSize,
    total: pagination.value.total,
  });
};

//表单

const handleResetModalOk = async () => {
  resetModalLoading.value = true;

  // user.value.password = hexMd5(user.value.password + KEY);
  resetModalLoading.value = false;
   await api.ResetpassUser(user.value);

  resetModalVisible.value = false;

  // 重新加载列表
  handleQuery({
    current: pagination.value.current,
    pageSize: pagination.value.pageSize,
    total: pagination.value.total,
  });
};
</script>

<style scoped></style>
